// 引入钩子
import {useSelector,useDispatch, IRouteComponentProps} from "umi";
import {useEffect, useState} from "react";
import moment from "moment";
import "./filing.less"
moment.locale('zh-CN');
const Archive: React.FC<IRouteComponentProps> = ({ history })=>{
    let store=useSelector(state=>state.yjsarchive);
    let {flag}=useSelector(state=>state.index);
    const dispatch = useDispatch();
    useEffect(() => {
    dispatch({
        type:"yjsarchive/getallarticleurl",
    })
    },[]);

    return <div className={flag?"yjsarchive":"blackyjsarchive"}>
        {/* 左侧的所有 */}
        <div className="left">
            <div className="yjstoptitle">
            <span>归档</span>
            <span className="titletwo">共计 <b>32</b> 篇</span>
            </div>
            <div className="left_year">
            {
        // 年
            store.keys.map((item:string,index:number)=>{
                return <div key={item}>
                    <span className="year">{item}</span>
                    {
                        // 星期
                     Object.keys(store.list[item]).map(item1=>{
                         return <div key={item+item1}>
                                <span className="week">{item1}</span>
                                {
                                    // 信息
                                    store.list[item][item1].map((information:any)=>{
                                        return <li key={information.id} className="yjsweekarticle" onClick={()=>{
                                            history.push(`../article/${information.id}`)
                                        }}>
                                            <span className="time">{moment(information.publishAt).format('MM-DD')}</span>
                                            <span>{information.title}</span>
                                            </li>
                                    })
                                }
                         </div>     
                     })
                    }
                </div>
            })
        }
            </div>
           
        </div>
        {/* 右侧的所有 */}
        <div className="right">
            <div className="right_top">
            <span  className="right_title">推荐阅读</span>
                {
                    store.righttop.map((item:any)=>{
                        return <div key={item.id} className="righttop_item" onClick={()=>{
                            history.push(`../article/${item.id}`)
                        }}>
                            <span>{item.title} <i>·</i><span className="lastcontent"> {moment(item.createAt).fromNow()}</span></span>
                        </div>
                    })
                }
            </div>
            <div className="right_bottom">
            <span className="right_title">文章标签</span>
                {
                    store.rightbottom.map((item:any)=>{
                        return <div key={item.id} className="rightbottom_item">
                            <div><span>{item.label}</span><span>共{item.articleCount}条</span></div>
                        </div>
                    })
                }
            </div>
        </div>
    </div>
}
export default Archive;
